<template>
	<el-container>
		<!--头部-->
		<el-header>
			<app-header></app-header>
			<!--<el-menu :default-active="activeIndex"  class="" mode="horizontal" @select="handleSelect" background-color="lightskyblue" text-color="#fff" active-text-color="#ffd04b">
				<router-link to="/home">
					<el-menu-item index="1">系统模块</el-menu-item>
				</router-link>
				
				<router-link to="/fanzhangguiWeb">
					<el-menu-item index="2">范掌柜</el-menu-item>
				</router-link>

				<!--<el-menu-item index="6">-->
				<!--<a href="https://www.ele.me" target="_blank">订单管理</a>-->
				<!--</el-menu-item>-->
				<!--<el-submenu index="3" style="float: right;">
					<template slot="title">我的</template>
					<el-menu-item class="menu_drop_item" index="2-1">选项1</el-menu-item>
					<el-menu-item class="menu_drop_item" index="2-2">选项2</el-menu-item>
					<el-menu-item class="menu_drop_item" index="2-3">选项3</el-menu-item>
				</el-submenu>
			</el-menu>-->
			<!--导航 end-->
		</el-header>
		<!--头部 end-->
		<el-container>

			<!--左侧 start-->
			<el-aside style="width: 201px;background-color:#545c64">
				<el-menu style="background-color:#545c64" :default-active="$route.path" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>

					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>权限系统</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="home">项目权限</el-menu-item>
							<el-menu-item index="1-2">模块权限</el-menu-item>
							<el-menu-item index="1-3">操作权限</el-menu-item>
							<el-menu-item index="/table">table</el-menu-item>
							<el-menu-item index="/addAdmin">addAdmin</el-menu-item>
						</el-menu-item-group>
					</el-submenu>

					<el-menu-item index="2">
						<i class="el-icon-menu"></i>
						<span slot="title">城市</span>
					</el-menu-item>

					<el-menu-item index="3">
						<i class="el-icon-setting"></i>
						<span slot="title">角色系统</span>
					</el-menu-item>

					<el-submenu index="4">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>组织架构</span>
						</template>
						<el-menu-item-group>
							<el-submenu index="1-4">
								<template slot="title">人员</template>
								<el-menu-item index="1-4-1">所属城市</el-menu-item>
								<el-menu-item index="1-4-1">分公司城市</el-menu-item>
							</el-submenu>

							<el-menu-item index="4-2">总部、分公司、部门</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>
			<!--左侧 end-->

			<el-main>

				<router-view></router-view>
			</el-main>

		</el-container>
	</el-container>
</template>

<script>
	import AppHeader from '../components/header'
	export default {

		data() {
			return {
			};
		},
		components:{
			AppHeader
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			handleOpen(key, keyPath) {
//				var that = this;
//				that.$route.path = key;
				console.log(key, keyPath);

			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style>
	/*头部*/
	
	.el-header {
		padding: 0;
	}
	
	.el-aside {
		color: #333;
		/*text-align: center;*/
	}
	
	.menu_drop_item {
		min-width: 50px !important;
	}
	
	.el-main {
		background-color: #E9EEF3;
		color: #333;
	}
	
	.el-menu-item-group__title {
		padding: 0;
	}
</style>